<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Curve</title>
<base target="class-frame">
<link href="../assets/css/docs.css" rel="stylesheet" type="text/css">
<script src="../assets/js/paper.js"></script>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/codemirror.js"></script>
<script src="../assets/js/docs.js"></script>
</head>
<body class="reference">
<div class="reference-class">
<h1>Curve</h1>

<p>The Curve object represents the parts of a path that are connected by
two following <a href="../classes/Segment.html"><tt>Segment</tt></a> objects. The curves of a path can be accessed
through its <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
<p>While a segment describe the anchor point and its incoming and outgoing
handles, a Curve object describes the curve passing between two such
segments. Curves and segments represent two different ways of looking at the
same thing, but focusing on different aspects. Curves for example offer many
convenient ways to work with parts of the path, finding lengths, positions or
tangents at given offsets.</p>

</div>

<!-- ============================== constructors ========================= -->
<div class="reference-members"><h2>Constructors</h2>
	
		
<div id="curve-segment1-segment2" class="member">
<div class="member-link">
<a name="curve-segment1-segment2" href="#curve-segment1-segment2"><tt><b>Curve</b>(segment1, segment2)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new curve object.</p>

<ul><b>Parameters:</b>

<li>
<tt>segment1:</tt> 
<a href="../classes/Segment.html"><tt>Segment</tt></a>


</li>

<li>
<tt>segment2:</tt> 
<a href="../classes/Segment.html"><tt>Segment</tt></a>


</li>

</ul>




</div>
</div>
</div>
	
		
<div id="curve-point1-handle1-handle2-point2" class="member">
<div class="member-link">
<a name="curve-point1-handle1-handle2-point2" href="#curve-point1-handle1-handle2-point2"><tt><b>Curve</b>(point1, handle1, handle2, point2)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
<p>Creates a new curve object.</p>

<ul><b>Parameters:</b>

<li>
<tt>point1:</tt> 
<a href="../classes/Point.html"><tt>Point</tt></a>


</li>

<li>
<tt>handle1:</tt> 
<a href="../classes/Point.html"><tt>Point</tt></a>


</li>

<li>
<tt>handle2:</tt> 
<a href="../classes/Point.html"><tt>Point</tt></a>


</li>

<li>
<tt>point2:</tt> 
<a href="../classes/Point.html"><tt>Point</tt></a>


</li>

</ul>




</div>
</div>
</div>
	
</div>





	<div class="reference-members"><h2>Properties</h2>
		
			
<div id="point1" class="member">
<div class="member-link">
<a name="point1" href="#point1"><tt><b>point1</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The first anchor point of the curve.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Point.html"><tt>Point</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="point2" class="member">
<div class="member-link">
<a name="point2" href="#point2"><tt><b>point2</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The second anchor point of the curve.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Point.html"><tt>Point</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="handle1" class="member">
<div class="member-link">
<a name="handle1" href="#handle1"><tt><b>handle1</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The handle point that describes the tangent in the first anchor point.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Point.html"><tt>Point</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="handle2" class="member">
<div class="member-link">
<a name="handle2" href="#handle2"><tt><b>handle2</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The handle point that describes the tangent in the second anchor point.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Point.html"><tt>Point</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="segment1" class="member">
<div class="member-link">
<a name="segment1" href="#segment1"><tt><b>segment1</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The first segment of the curve.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Segment.html"><tt>Segment</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="segment2" class="member">
<div class="member-link">
<a name="segment2" href="#segment2"><tt><b>segment2</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The second segment of the curve.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Segment.html"><tt>Segment</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="path" class="member">
<div class="member-link">
<a name="path" href="#path"><tt><b>path</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The path that the curve belongs to.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Path.html"><tt>Path</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="index" class="member">
<div class="member-link">
<a name="index" href="#index"><tt><b>index</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The index of the curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<tt>Number</tt>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="next" class="member">
<div class="member-link">
<a name="next" href="#next"><tt><b>next</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The next curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
belongs to.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Curve.html"><tt>Curve</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="previous" class="member">
<div class="member-link">
<a name="previous" href="#previous"><tt><b>previous</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The previous curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
belongs to.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Curve.html"><tt>Curve</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="selected" class="member">
<div class="member-link">
<a name="selected" href="#selected"><tt><b>selected</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>Specifies whether the points and handles of the curve are selected.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<tt>Boolean</tt>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="length" class="member">
<div class="member-link">
<a name="length" href="#length"><tt><b>length</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The approximated length of the curve in points.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<tt>Number</tt>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="bounds" class="member">
<div class="member-link">
<a name="bounds" href="#bounds"><tt><b>bounds</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The bounding rectangle of the curve excluding stroke width.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="strokebounds" class="member">
<div class="member-link">
<a name="strokebounds" href="#strokebounds"><tt><b>strokeBounds</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The bounding rectangle of the curve including stroke width.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
			
<div id="handlebounds" class="member">
<div class="member-link">
<a name="handlebounds" href="#handlebounds"><tt><b>handleBounds</b></tt></a>
</div>
<div class="member-description hidden">

<div class="member-text">
	<p>The bounding rectangle of the curve including handles.</p>
	
		<p>Read only.</p>
	
	
	<ul><b>Type:</b>
	<li>
		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
	</li>
	</ul>
	
	
</div>

</div>
</div>
		
	</div>



<!-- ============================== methods ================================ -->
	<div class="reference-members"><h2>Methods</h2>
		
			
<div id="islinear" class="member">
<div class="member-link">
<a name="islinear" href="#islinear"><tt><b>isLinear</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Checks if this curve is linear, meaning it does not define any curve
handle.</p>
	
	
	<ul><b>Returns:</b>
	
		<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the curve is linear, <tt>false</tt> otherwise
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="divide" class="member">
<div class="member-link">
<a name="divide" href="#divide"><tt><b>divide</b>([offset[, isParameter]])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Divides the curve into two curves at the given offset. The curve itself
is modified and becomes the first part, the second part is returned as a
new curve. If the modified curve belongs to a path item, the second part
is also added to the path.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>offset:</tt> 
<tt>Number</tt>
&mdash;&nbsp;the offset on the curve at which to split,
       or the curve time parameter if <tt>isParameter</tt> is <tt>true</tt>
&mdash;&nbsp;optional, default: <tt>0.5</tt>
</li>

<li>
<tt>isParameter:</tt> 
<tt>Boolean</tt>
&mdash;&nbsp;pass <tt>true</tt> if <tt>offset</tt>
       is a curve time parameter.
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt>&nbsp;&mdash;&nbsp;the second part of the divided curve
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="split" class="member">
<div class="member-link">
<a name="split" href="#split"><tt><b>split</b>([offset[, isParameter]])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Splits the path this curve belongs to at the given offset. After
splitting, the path will be open. If the path was open already, splitting
will result in two paths.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>offset:</tt> 
<tt>Number</tt>
&mdash;&nbsp;the offset on the curve at which to split,
       or the curve time parameter if <tt>isParameter</tt> is <tt>true</tt>
&mdash;&nbsp;optional, default: <tt>0.5</tt>
</li>

<li>
<tt>isParameter:</tt> 
<tt>Boolean</tt>
&mdash;&nbsp;pass <tt>true</tt> if <tt>offset</tt>
       is a curve time parameter.
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path after splitting, if any
</li>
	
	</ul>

	
	<p><b>See also:</b>
	<tt><a href="../classes/Path.html#split-index-parameter"><tt>path.split(index, parameter)</tt></a></tt>
	</p>

	
</div>
</div>
</div>
		
			
<div id="reverse" class="member">
<div class="member-link">
<a name="reverse" href="#reverse"><tt><b>reverse</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Returns a reversed version of the curve, without modifying the curve
itself.</p>
	
	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt>&nbsp;&mdash;&nbsp;a reversed version of the curve
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="remove" class="member">
<div class="member-link">
<a name="remove" href="#remove"><tt><b>remove</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Removes the curve from the path that it belongs to, by merging its two
path segments.</p>
	
	
	<ul><b>Returns:</b>
	
		<li>
<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the curve was removed, <tt>false</tt> otherwise
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="clone" class="member">
<div class="member-link">
<a name="clone" href="#clone"><tt><b>clone</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Returns a copy of the curve.</p>
	
	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt>
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="tostring" class="member">
<div class="member-link">
<a name="tostring" href="#tostring"><tt><b>toString</b>()</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	
	
	
	<ul><b>Returns:</b>
	
		<li>
<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;a string representation of the curve
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="getparameterat-offset" class="member">
<div class="member-link">
<a name="getparameterat-offset" href="#getparameterat-offset"><tt><b>getParameterAt</b>(offset[, start])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Calculates the curve time parameter of the specified offset on the path,
relative to the provided start parameter. If offset is a negative value,
the parameter is searched to the left of the start parameter. If no start
parameter is provided, a default of <tt>0</tt> for positive values of
<tt>offset</tt> and <tt>1</tt> for negative values of <tt>offset</tt>.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>offset:</tt> 
<tt>Number</tt>


</li>

<li>
<tt>start:</tt> 
<tt>Number</tt>

&mdash;&nbsp;optional
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the curve time parameter at the specified offset.
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="getparameterof-point" class="member">
<div class="member-link">
<a name="getparameterof-point" href="#getparameterof-point"><tt><b>getParameterOf</b>(point)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Returns the curve time parameter of the specified point if it lies on the
curve, <tt>null</tt> otherwise.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>point:</tt> 
<a href="../classes/Point.html"><tt>Point</tt></a>
&mdash;&nbsp;the point on the curve.

</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the curve time parameter of the specified point.
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="getlocationat-offset" class="member">
<div class="member-link">
<a name="getlocationat-offset" href="#getlocationat-offset"><tt><b>getLocationAt</b>(offset[, isParameter])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Calculates the curve location at the specified offset or curve time
parameter.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>offset:</tt> 
<tt>Number</tt>
&mdash;&nbsp;the offset on the curve, or the curve time
       parameter if <tt>isParameter</tt> is <tt>true</tt>

</li>

<li>
<tt>isParameter:</tt> 
<tt>Boolean</tt>
&mdash;&nbsp;pass <tt>true</tt> if <tt>offset</tt>
       is a curve time parameter.
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>&nbsp;&mdash;&nbsp;the curve location at the specified the offset.
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="getlocationof-point" class="member">
<div class="member-link">
<a name="getlocationof-point" href="#getlocationof-point"><tt><b>getLocationOf</b>(point)</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Returns the curve location of the specified point if it lies on the
curve, <tt>null</tt> otherwise.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>point:</tt> 
<a href="../classes/Point.html"><tt>Point</tt></a>
&mdash;&nbsp;the point on the curve.

</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>&nbsp;&mdash;&nbsp;the curve location of the specified point.
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="getpointat-offset" class="member">
<div class="member-link">
<a name="getpointat-offset" href="#getpointat-offset"><tt><b>getPointAt</b>(offset[, isParameter])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Returns the point on the curve at the specified offset.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>offset:</tt> 
<tt>Number</tt>
&mdash;&nbsp;the offset on the curve, or the curve time
       parameter if <tt>isParameter</tt> is <tt>true</tt>

</li>

<li>
<tt>isParameter:</tt> 
<tt>Boolean</tt>
&mdash;&nbsp;pass <tt>true</tt> if <tt>offset</tt>
       is a curve time parameter.
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the point on the curve at the specified offset.
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="gettangentat-offset" class="member">
<div class="member-link">
<a name="gettangentat-offset" href="#gettangentat-offset"><tt><b>getTangentAt</b>(offset[, isParameter])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Returns the tangent vector of the curve at the specified position.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>offset:</tt> 
<tt>Number</tt>
&mdash;&nbsp;the offset on the curve, or the curve time
       parameter if <tt>isParameter</tt> is <tt>true</tt>

</li>

<li>
<tt>isParameter:</tt> 
<tt>Boolean</tt>
&mdash;&nbsp;pass <tt>true</tt> if <tt>offset</tt>
       is a curve time parameter.
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the tangent of the curve at the specified offset.
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="getnormalat-offset" class="member">
<div class="member-link">
<a name="getnormalat-offset" href="#getnormalat-offset"><tt><b>getNormalAt</b>(offset[, isParameter])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Returns the normal vector of the curve at the specified position.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>offset:</tt> 
<tt>Number</tt>
&mdash;&nbsp;the offset on the curve, or the curve time
       parameter if <tt>isParameter</tt> is <tt>true</tt>

</li>

<li>
<tt>isParameter:</tt> 
<tt>Boolean</tt>
&mdash;&nbsp;pass <tt>true</tt> if <tt>offset</tt>
       is a curve time parameter.
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the normal of the curve at the specified offset.
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
			
<div id="getcurvatureat-offset" class="member">
<div class="member-link">
<a name="getcurvatureat-offset" href="#getcurvatureat-offset"><tt><b>getCurvatureAt</b>(offset[, isParameter])</tt></a>
</div>
<div class="member-description hidden">
<div class="member-text">
	<p>Returns the curvature vector of the curve at the specified position.</p>
<p>Curvatures indicate how sharply a curve changes direction. A straight
line has zero curvature where as a circle has a constant curvature.</p>
	
<ul><b>Parameters:</b>

<li>
<tt>offset:</tt> 
<tt>Number</tt>
&mdash;&nbsp;the offset on the curve, or the curve time
       parameter if <tt>isParameter</tt> is <tt>true</tt>

</li>

<li>
<tt>isParameter:</tt> 
<tt>Boolean</tt>
&mdash;&nbsp;pass <tt>true</tt> if <tt>offset</tt>
       is a curve time parameter.
&mdash;&nbsp;optional, default: <tt>false</tt>
</li>

</ul>

	
	<ul><b>Returns:</b>
	
		<li>
<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the curvature of the curve at the specified offset.
</li>
	
	</ul>

	
	
</div>
</div>
</div>
		
	</div>




<!-- =========================== copyright notice ========================= -->
<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
<div class="content-end"></div>

</body>